<template>
    <div class="container">
        <div class="top">
            <span class="count">年度游客量对比</span>
            <img src="@/assets/images/dataScreen-title.png" alt="">
        </div>
        <div class="main">
            <div class="lineEcharts" ref="lineEchartsEL"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

import * as echarts from 'echarts/core';
import { GridComponent, LegendComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
    GridComponent,
    LegendComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition
]);

const lineEchartsEL = ref()

const lineEchartsFun = () => {
    const lineEcharts = echarts.init(lineEchartsEL.value);
    lineEcharts.setOption({
        tooltip: {
            trigger: 'item'
        },
        grid: {
            top: '15%',
            bottom: '15%',
            left: '7%',
            right: '7%'
        },
        textStyle: {
            color: '#fff'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        legend: {
            data: ['2022年', '2023年', '2024年'],
            left: '15%',
            textStyle: {
                color: '#fff'
            }
        },
        yAxis: {
            name: '(人次)',
            axisLine: {
                show: true
            },
            axisTick: {
                show: true
            },
            splitLine: {
                show: false
            }
        },
        series: [
            {
                data: [500, 300, 250, 200, 180, 150, 300, 500, 550, 700, 450, 300],
                type: 'line',
                name: '2022年',
                smooth: true,
                areaStyle: {
                    color: 'rgba(0, 88, 196, .3)'
                }
            },
            {
                data: [600, 350, 200, 150, 130, 150, 350, 600, 750, 800, 750, 600],
                type: 'line',
                name: '2023年',
                smooth: true,
                areaStyle: {
                    color: 'rgba(167, 65, 108, .3)'
                }
            },
            {
                data: [400, 200, 150, 180, 280, 360, 250, 400, 500, 650, 600, 550],
                type: 'line',
                name: '2024年',
                smooth: true,
                areaStyle: {
                    color: 'rgba(175, 120, 10, .3)'
                }
            }
        ]
    })
}

onMounted(() => {
    lineEchartsFun()
})

</script>

<style lang="scss" scoped>
.container {
    width: 90%;
    flex: 1;
    background-image: url('@/assets/images/dataScreen-main-lb.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0.5vw 0;

    .top {
        width: 100%;
        height: 20%;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .count {
            display: block;
            font-size: 1vw;
            font-weight: 550;
        }

        img {
            width: 5vw;
            height: 0.5vw;
        }
    }

    .main {
        width: 100%;
        height: 80%;

        .lineEcharts {
            width: 100%;
            height: 100%;
        }
    }
}
</style>